<template>
  <button :disabled="disabled || loading" :autofocus="autofocus" :type="nativeType" class="t-button" :class="[
      type ? 't-button--' + type : '',
      size ? 't-button--' + size : '',
      {
        'is-disabled': disabled,
        'is-loading': loading
      }]" @click="handleClick">
    <span>{{ value }}</span>
    <span v-if="$slots.default" ><slot></slot></span>
    <i class="iconfont icon-loading" style="margin-right: -0.25rem;" v-if="loading" ></i>
    <i :class="'iconfont icon-' + icon" style="margin-right: -0.25rem;" v-if="icon && !loading" @click="handleIconClick"></i>
  </button>
</template>

<script>
  export default {
    name: 'TButton',
    props: {
      disabled: {
        type: Boolean,
        default: false,
      },
      autofocus: {
        type: Boolean,
        default: true,
      },
      nativeType: {
        type: String,
        default: 'button',
      },
      type: {
        type: String,
        default: '',
      },
      value: {
        type: String,
        default: '',
      },
      size: {
        type: String,
        default: '',
      },
      loading: {
        type: Boolean,
        default: false,
      },
      icon: {
        type: String,
        default: '',
      },
    },
    methods: {
      handleClick(event) {
        this.$emit('click', event);
      },
      handleIconClick(event) {
        this.$emit('icon-click', event);
      },
    },
  };
</script>